<template>
  <Form ref="formRef" :data="model" @ok="onOk">
    <FormItem field="name" title="名称" required>
      <Input v-model="model.name" />
    </FormItem>
    <FormItem field="key" title="Key" required>
      <Input v-model="model.key" />
    </FormItem>
    <FormItem field="remark" title="备注">
      <Input type="textarea" v-model="model.remark" />
    </FormItem>
    <template #op>
      <ModalButton :loading="loading" />
    </template>
  </Form>
</template>

<script setup lang="ts">
import { Message, Form, FormItem, Input, ModalButton } from '@idmy/ui'
import { createOrUpdateProject } from './services'

defineOptions({ name: 'ProjectCreate' })

const props = defineProps({
  model: Object as PropType<object>,
})

const model = reactive(props.model || {})
const [onOk, loading] = useLoading(async () => {
  await createOrUpdateProject(model)
  Message.success('保存成功')
  Modal.ok(model)
})
</script>
